<template>
	<view class="containter">
		<z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
			<block slot="top">
				<view class="headerBg"></view>
				<uv-navbar title="派单大厅" titleStyle="color:#fff" bgColor="transparent" placeholder>
					<template v-slot:left>
						<image @click="toSearchPage" style="width: 48rpx;height: 48rpx;"
							src="../../static/images/search.png" mode=""></image>
					</template>
				</uv-navbar>
				<view class="tabs">
					<view class="tab-item flex flex-center align-center" @click="setIndex(index)"
						:class="currentIndex == index?'active':''" v-for="(item, index) in tabsList" :key="index">
						{{ item.name }}
						<uv-badge v-if="index == 0" numberType="overflow" type="error" max="99" :value="count">
						</uv-badge>
					</view>
				</view>
			</block>
			<view class="warpper">
				<List :dataList="dataList" @init="init"></List>
			</view>
			<view slot="bottom">
				<view class="paidan">
					<view class="btn" @click="toAddPage">
						派单
					</view>
					<view class="shipei"></view>
				</view>

			</view>
		</z-paging>

		<Tabbar :selectedIndex="0"></Tabbar>
	</view>
</template>

<script>
	import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
				tabsList: [{
						name: "待接单"
					},
					{
						name: "已接单"
					}
				],
				params: {
					is_follow: 0,
					page: 1,
					limit: 10,
					keyword: ""
				},
				dataList: [],
				count: 0,
				currentIndex: 0
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.paging.reload();
			})
		},
		methods: {
			handleBack() {
				uni.removeStorageSync("token");
				uni.reLaunch({
					url: "/pages/login/index"
				})
			},
			queryList(pageNo, pageSize) {
				this.params.page = pageNo;
				this.params.limit = pageSize;
				// 此处请求仅为演示，请替换为自己项目中的请求
				reqApi.setList(this.params).then(res => {
					console.log("返回的结果", res);
					// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
					this.$refs.paging.complete(res.data.list);
					this.count = res.data.wait_count;
				})
			},
			setIndex(index) {
				this.currentIndex = index;
				this.params.is_follow = index;
				this.dataList = [];
				this.$refs.paging.reload();
			},
			toSearchPage() {
				uni.navigateTo({
					url: "/pages/home/search?type=1"
				})
			},
			toAddPage() {
				uni.navigateTo({
					url: "/pages/order/orderAdd"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shipei {
		width: 100%;
		height: 100rpx;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.paidan {
		padding: 24rpx 76rpx;
		box-sizing: border-box;
		background: #fff;

		.btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient( to top , #0992F5 0%, #1071E7 100%);
			border-radius: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.active {
		font-weight: bold;
	}

	.active::after {
		position: absolute;
		content: " ";
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 46rpx;
		height: 6rpx;
		background: #FFFFFF;
		border-radius: 110rpx;
	}

	.containter {
		position: relative;

		.headerBg {
			width: 750rpx;
			height: 704rpx;
			background: linear-gradient(to top, rgba(16, 113, 231, 0) 0%, #1071E7 100%);
			position: absolute;
			top: 0;
			left: 0;
		}

		.tabs {
			display: flex;

			.tab-item {
				flex: 1;
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				height: 88rpx;
			}
		}

		.warpper {
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 100;

		}
	}
</style>
